<template>
	<view class="pages-card">
		<view class="order-item-top row-box pb-20">
			<view class="user-info-box flex align-items-center ">
				<image class="avatar mr-20" src="/static/images/common/avatar.png" mode="scaleToFill"></image>
				<view class="user-info ">
					<view class="nickname fc-0 out-1">
						微信昵称
					</view>
					<view class="user-name flex align-items-center">
						<view class="mr-10 name out-1">姓名</view>
						<view>13312341234</view>
					</view>
				</view>
			</view>
			<view class="flex align-items-center justify-content-end pr-30">
				<view class="iconfont p-20" @click="makeCall">
					&#xe65f;
				</view>
				<view class="iconfont p-20 " @click="sendChat">
					&#xe631;
				</view>
			</view>
			<image class="order-item-top-img" src="/static/images/order/co-type-0.png" mode="scaleToFill"></image>
		</view>
		<view class="order-item-center " @click="onDetails">
			<view class="goods-list">
				<view class="row-box goods-item mt-20 mb-20" v-for="(item,index) in 3" :key="index">
					<image class="goods-img mr-20" src="/static/images/common/goods-img.png" mode="scaleToFill"></image>
					<view class="row-box flex-1">
						<view class="info-box">
							<view class="fs-lg fc-0 fw-6">
								90代100元代金券
							</view>
							<view class="fs-sm">
								周一至周日可用
							</view>
							<view class="time-text">
								到期时间:2025/05/30
							</view>
						</view>
						<view class="price-box">
							<view class="fc-ac">
								￥90.00
							</view>
							<view class="fc-0 fs-sm">
								×1
							</view>
						</view>
					</view>
				</view>

				<view class="row-box mt-10">
					<view class="fs-sm fc-ac">
						配送中
					</view>
					<view class="flex align-items-center">
						<view class="">
							<text>共 <text class="fc-warn">2</text> 种 <text class="fc-warn">5</text> 件商品</text>
						</view>
						<view class="ml-20">
							合计 <text class="fc-ac fs-lg fw-6">￥90.00</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		props: {
			info: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		created() {},
		methods: {
			// 去详情页面
			onDetails() {
				this.$emit('onDetails')
			},
			// 拨打电话
			makeCall() {
				this.makeCallFn({})
				// const url = `tel:${this.info.mobile}`
				// window.location.href = url
			},
			// 发起聊天
			sendChat() {
				this.sendChatFn({})
				// this.$emit('sendChat')
			},
			// 核销
			verification() {
				this.$emit('verification')
			},
			// 提醒使用
			onUse() {
				this.$emit('onUse')
			},
			// 到店核销
			storeVerification() {
				this.$emit('storeVerification')
			},
			// 已到店
			inStore() {
				this.$emit('inStore')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tag {
		font-size: 24rpx;
		color: #999;
		padding: 6rpx 12rpx;
		border-radius: 10rpx;
		background-color: #f5f5f5;
		margin: 0 4rpx;
	}

	.tag-green {
		color: #00A191;
		background-color: #E8FFFC;
	}

	.tag-orange {
		color: #D49B07;
		background-color: #FFF6E9;
	}

	.tag-red {
		color: #EE3227;
		background-color: #FFEEED;
	}

	.tag-blue {
		color: #257DFF;
		background-color: #EAF6FF;
	}

	.pages-card {
		margin: 0 auto 20rpx;
	}

	.order-item-top {
		position: relative;
		border-bottom: 1rpx solid #ededeb;

		.order-item-top-img {
			width: 88rpx;
			height: 88rpx;
			position: absolute;
			z-index: 1;
			top: -30rpx;
			right: -30rpx;
		}

		.nickname {
			width: 340rpx;
		}

		.name {
			max-width: 140rpx;
		}


		.avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			overflow: hidden;
			flex-shrink: 0;
		}
	}

	.order-item-center {

		.goods-img {
			width: 130rpx;
			height: 130rpx;
			border-radius: 10rpx;
			overflow: hidden;
			flex-direction: 0;
		}

		.price-box {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			justify-content: center;
		}
	}

	.order-item-bottom {
		border-top: 1rpx solid #ededeb;
	}
</style>